import React from "react";
import {
  BrowserRouter as Router,
  Route,
  Switch,
  Redirect,
} from "react-router-dom";
import { BackTop } from "antd";
import "antd/dist/antd.css";
import "../static/css/common.less";
import Header from "../components/Header";
import Footer from "../components/Footer";
import Index from "./Index";
import List from "./list";
import Detail from "./detail";
import backgroundImg from "../static/imgs/background.png";
import About from "./About";
import NotFound from "./Not404";
function Layout() {
  return (
    <div className="layout">
      <div
        className="background-layer"
        style={{
          position: "fixed",
          top: 0,
          left: 0,
          width: "100%",
          height: "100%",
          backgroundImage: `url(${backgroundImg})`,
          backgroundSize: "cover",
          backgroundPosition: "center",
          zIndex: -1,
          transition: "opacity 0.3s ease-in-out",
        }}
      />
      <Router>
        <Header />
        <div className="layout-main">
          <Switch>
            
            <Route path="/" exact component={Index}></Route>
            <Route path="/index" exact component={Index}></Route>
            <Route path="/list" exact component={List}></Route>
            <Route path="/detail/:id" exact component={Detail}></Route>

            <Route path="/about" exact component={About}></Route>
            <Route path="/404" component={NotFound} />
            <Route component={NotFound}></Route>
          </Switch>
        </div>
      </Router>
      <BackTop />
      <Footer />
    </div>
  );
}
export default Layout;
